<template>
  <div>
    <!-- 图片预览的模态框 -->
    <el-dialog :visible.sync="dialogVisible" width="50%" title="图片预览">
      <img
        :src="previewImageUrl"
        alt="Preview"
        style="max-width: 100%; max-height: 400px; display: block; margin: 0 auto;"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-table :data="data" v-loading="loading" border style="width: 100%">
      <el-table-column>
        <template slot-scope="{ row }">
          <Preview :image-list="fileList" :length="1" :field="img" />
        </template>
      </el-table-column>
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
      />
    </el-table>
  </div>
</template>

<script setup>
import { computed, ref } from "vue"
import Preview from "@/components/Img/Preview.vue"

const data = ref([
  { id: 1, name: "John Doe", age: 30, checked: false, img: "" },
  { id: 2, name: "Jane Smith", age: 25, checked: false, img: "" },
  { id: 3, name: "Sam Green", age: 35, checked: false, img: "" }
])
const dialogVisible = ref(false)
const previewImageUrl = ref("")
const imgUrl = "http://192.168.18.130:8889/api/saas/admin/file/preview/"
data.value.forEach(item => {
  item.img = imgUrl + "1057228589738496000"
})

const fileList = computed(() => data.value.map(item => item.img))
const columns = [
  { prop: "id", label: "ID", width: 60 },
  { prop: "name", label: "Name" },
  { prop: "age", label: "Age", width: 80 }
]

const handlePreview = function(file) {
  previewImageUrl.value = file.url
  dialogVisible.value = true
}
const handleRemove = function(index) {
  this.fileList.splice(index, 1)
}

const loading = ref(false)
</script>
